<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/arttmpl.js"></script>
		<script src="js/echarts-all.js"></script>
		<script src="my.js"></script>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">考题</h1>
		</header>
		<div class="mui-content" style="">
			<div id="slider" class="mui-slider " style="position:absolute;background-color: #fffbe8;">
				<ul class="mui-table-view myswitch">
					<li class="mui-table-view-cell">
						<span></span>
						<div id="myswitch" class="mui-switch mui-switch-mini mui-active">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
				<div id="ak47" class="mui-slider-group"></div>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab mynav">
			<a class="mui-tab-item mui-active" href="#jjPopover">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">基金</span>
			</a>
			<a class="mui-tab-item" href="#ddPopover">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">道德</span>
			</a>
			<a class="mui-tab-item" id="jjsj">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">基金随机</span>
			</a>
			<a class="mui-tab-item" id="ddsj">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">复答错题</span>
			</a>
		</nav>
		<div id="jjPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">基金第1套</a></li>
						<li class="mui-table-view-cell"><a href="#">基金第2套</a></li>
						<li class="mui-table-view-cell"><a href="#">基金第3套</a></li>
						<li class="mui-table-view-cell"><a href="#">基金第4套</a></li>
						<li class="mui-table-view-cell"><a href="#">基金第5套</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<div id="ddPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">道德第1套</a></li>
						<li class="mui-table-view-cell"><a href="#">道德第2套</a></li>
						<li class="mui-table-view-cell"><a href="#">道德第3套</a></li>
						<li class="mui-table-view-cell"><a href="#">道德第4套</a></li>
						<li class="mui-table-view-cell"><a href="#">道德第5套</a></li>
					</ul>
				</div>
			</div>
		</div>
		
		<script id="testSelect" type="text/html">
			<%for(var j=0; j<lst.length; j++){%>
			<li class="mui-table-view-cell mui-radio mui-left jjtest_val " alt='aaa' idx=<%=idx%> isRight=<%=(lst[j].isRight)%> >
				<input name="radio<%=idx%>" type="radio" /><%=(lst[j].val)%>
			</li>
			<%}%>
		</script>
		 
		<script id="test" type="text/html">
		    <%for(var i = 0; i < list.length; i ++) {%>
			    <div class="mui-slider-item jj_item_<%=i+1%>">
					<div class="mui-card myak">
						<ul class="mui-table-view mui-table-view-radio">
							<li class="mui-table-view-cell jjtest_title"><%=(i+1)%>. <%=(list[i].title)%></li>
							<%var tData={idx:(i+1), lst:list[i].select};%>
							<%include('testSelect', tData)%>
						</ul>
					</div>
					
					<div class="mui-card" style="padding:8px 8px 8px 8px;margin-top:30px;min-height:80px;height:auto;display: none;">
						<ul class="mui-table-view">
							<%=list[i].content%>
						</ul>
					</div>
					
					<% if(i==(list.length-1)){%>
					<div class="chart" id="pieChart"></div>
					<% } %>
				</div>
			<%}%>
		</script> 
		<script type="text/javascript">
			var $slider;
		
			/**
			 * 随机排序
			 * @param {Object} a
			 * @param {Object} b
			 */
			function randomsort(a, b) {
			    return Math.random()>.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1
			}
			
			function rnd(min,max){
				var tmp=min;
				if(max<min){min=max;max=tmp;}
				return Math.floor(Math.random()*(max-min+1)+min);
			}
			
			/**
			 * 获取试题
			 */
			function getList() {
				jQuery.each(youData, function(idx, obj){
					for(var m=0;m<obj.length;m++){
						youData[idx][m]["select"] = obj[m]["select"].sort(randomsort);
					}
				});
				
				tmpData = youData[rnd(0,4)].sort(randomsort);
				
				var mydata = {  
					list: tmpData
				}
				var html = template('test',mydata);
				document.getElementById("ak47").innerHTML = html;
				
				initLst(true);
			}
			
			function getIdxList(idx) {
				jQuery.each(youData[idx], function(m, obj){
					youData[idx][m]["select"] = obj["select"].sort(randomsort);
				});
				
				tmpData = youData[idx].sort(randomsort);
				
				var idxData = {  
					list: tmpData
				}
				var html = template('test',idxData);
				document.getElementById("ak47").innerHTML = html;
				
				var isActive = document.getElementById("myswitch").classList.contains("mui-active");
				initLst(isActive);
				$slider.gotoItem(0);
			}
			
			function getIdxList2(idx) {
				jQuery.each(ddData[idx], function(m, obj){
					ddData[idx][m]["select"] = obj["select"].sort(randomsort);
				});
				
				tmpData = ddData[idx].sort(randomsort);
				
				var idxData = {  
					list: tmpData
				}
				var html = template('test',idxData);
				document.getElementById("ak47").innerHTML = html;
				
				var isActive = document.getElementById("myswitch").classList.contains("mui-active");
				initLst(isActive);
				$slider.gotoItem(0);
			}
			
			function changeAnswerState(state){
				var idxData = {  
					list: tmpData
				}
				var html = template('test',idxData);
				document.getElementById("ak47").innerHTML = html;
				initLst(state);
			}
			
			function initLst(state){
				if(state){
					jQuery(".myak").find(".jjtest_val[isRight='yes']").each(function(idx, elem){
						var $that = jQuery(this);
						
						$that.find("input:radio").addClass("answserYes");
						$that.find("input:radio").attr("checked",true);
						
						$that.parent().find("li :radio").attr("disabled",true);
						$that.parent().find("li").prop("disabled", true);
						
						$that.parentsUntil('.mui-card').parent().siblings().show();
					});
				}else{
					wrongData = [];
					myCounter = 0;
					jQuery(".myak").find(".jjtest_val[isRight='yes']").each(function(idx, elem){
						var $that = jQuery(this);
						
						$that.find("input:radio").removeClass("answserYes");
						$that.find("input:radio").removeAttr("checked");
						$that.parent().find("li :radio").attr("disabled",false);
						$that.parent().find("li").prop("disabled", false);
						
						$that.parentsUntil('.mui-card').parent().siblings().hide();
					});
					
					
					jQuery(".myak").find("li").on('tap', function(e){
						var $that = jQuery(this);
						var __parent = $that.parent().parent().parent();
						var answerIdx = __parent.index();
						
						if ($that.attr("isRight")=="yes") {
							$slider.gotoItem($that.attr("idx"));
							$that.find("input:radio").addClass("answserYes");
						} else {
							wrongData.push(tmpData[answerIdx]);
							$that.find("input:radio").addClass("answserNo");
							$that.siblings("li[isRight='yes']").css("color", "#4CD964");
						}
						
						$that.find("input:radio").attr("checked",true);
						$that.parent().find("li :radio").attr("disabled",true);
						$that.parent().find("li").prop("disabled", true);
						
						$that.parentsUntil('.mui-card').parent().siblings().show();
						
						myCounter++;
						
						if (answerIdx==tmpData.length-1) {
							var 未作答题数=tmpData.length-myCounter;
							var 错误题数=wrongData.length;
							var 正确题数=tmpData.length-错误题数-未作答题数;
							var getOption = function() {
								var chartOption = {
									calculable: false,
									series: [{
										name: '访问来源',
										type: 'pie',
										radius: '65%',
										center: ['50%', '50%'],
										data: [{
											value: 正确题数,
											name: '正确-'+正确题数
										}, {
											value: 错误题数,
											name: '错误-'+错误题数
										}, {
											value: 未作答题数,
											name: '未作答-'+未作答题数
										}]
									}]
								};
								
								return chartOption;
							};
							
							var pieChart = echarts.init(document.getElementById('pieChart'));
							pieChart.setOption(getOption());
						}
					});
				}
				//plus.nativeUI.closeWaiting();
			}
			
			document.querySelector('.mui-slider').addEventListener('slide', function(event) {
			 	//注意slideNumber是从0开始的；
			 	var index = event.detail.slideNumber+1;
			 	if(index==2||index==3){
			 		
			 	}
			});
			
			
			jQuery(function(){
				$slider = mui('#slider').slider()
				
				jQuery("#jjPopover").find("li").on("tap", function(e){
					mui('#jjPopover').popover('hide');
					getIdxList(jQuery(this).index());
				});
				
				jQuery("#ddPopover").find("li").on("tap", function(e){
					mui('#ddPopover').popover('hide');
					getIdxList2(jQuery(this).index());
				});
				
				mui('.mui-content .mui-switch').each(function() { //循环所有toggle
					this.parentNode.querySelector('span').innerText = (this.classList.contains('mui-active') ? '记忆模式' : '答题模式');
					
					this.addEventListener('toggle', function(event) {
						//event.detail.isActive 可直接获取当前状态
						this.parentNode.querySelector('span').innerText = (event.detail.isActive ? '记忆模式' : '答题模式');
						plus.nativeUI.showWaiting();
						changeAnswerState(event.detail.isActive);
						plus.nativeUI.closeWaiting();
					});
				});
				
				document.getElementById('jjsj').addEventListener('tap', function(){
					tmpData = [];
					
					
					jQuery.each(youData, function(idx, obj){
						var currentLen = obj.length;
						for(var sa=0;sa<20;sa++){
							var tmpObj = obj[rnd(0,currentLen-1)];
							tmpData.push(tmpObj);
						}
					});
					
					var isActive = document.getElementById("myswitch").classList.contains("mui-active");
					if(isActive){
					  mui("#myswitch").switch().toggle();
					}
					
					changeAnswerState(false);
					$slider.gotoItem(0);
				});
				
				document.getElementById("ddsj").addEventListener('tap', function(){
					tmpData = wrongData;
					changeAnswerState(false);
					$slider.gotoItem(0);
				});
				
			});
		</script>
		      
		<script>
			
			getList();
			
			mui.plusReady(function() {
				//仅支持竖屏显示
				plus.screen.lockOrientation("portrait-primary");
				
				mui.oldBack = mui.back;
				var backButtonPress = 0;
				mui.back = function(event) {
					backButtonPress++;
					if (backButtonPress > 1) {
						plus.runtime.quit();
					} else {
						plus.nativeUI.toast('再按一次退出应用');
					}
					setTimeout(function() {
						backButtonPress = 0;
					}, 1000);
					return false;
				};
				
				//jQuery("#slider").height(plus.screen.resolutionHeight-44);
				initHeight = (plus.screen.resolutionHeight+10);
				jQuery("#slider").css("min-height", initHeight);
			});
			
		</script>
	</body>
</html>